<template>
  <Page name="更换手机号">
    <div class="enter-code">
      <div class="title">
        <p>我们已发送 <span>验证码</span>到您的手机</p>
        <p class="phone">+{{form.area_code}}{{form.phone_num}}</p>
      </div>
      <div class="pay-tool">
        <div class="pay-tool-content">
          <div class="pay-tool-inputs">
            <div class="item" v-for="i in items">
              <span class="icon_dot" v-if="password[i]">{{password[i]}}</span>
            </div>
          </div>
        </div>
        <p class="tips">收不到验证码？ <span @click="reGetCode">{{btnText}}</span> </p>
        <div class="pay-tool-keyboard">
          <ul>
            <li @touchstart="keyUpHandle($event)" v-for="val in keys">
              {{ val }}
            </li>
            <li class="del" @touchstart="delHandle">
              <img src="~/assets/img/clear.png" alt="" class="icon-del">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
export default {
  components: {
    Page,
  },

  data() {
    return {
        items: [0, 1, 2, 3, 4, 5],
        keys: keys(),
        password: [],
        count:"",
        timer:null,
        btnText:"重新获取",
        form:{
          area_code:"",
          phone_num:"",
          ver_code:""
        }
    }
  },
  mounted(){
    this.form.area_code = this.$utils.getUrlKey("code");
    this.form.phone_num = this.$utils.getUrlKey("phone");
    this.getCode();
  },
  methods: {
      backHandle () {
        this.clearPasswordHandle();  // 返回时清除password
        this.$emit('backFnc'); // 返回上级
      },
      keyUpHandle (e) {
        let text = e.currentTarget.innerText;
        let len = this.password.length;
        if (!text || len >= 6) return;
        this.password.push(text);
        this.ajaxData();
      },
      delHandle () {
        if (this.password.length <= 0) return false ;
        this.password.pop();
      },
      ajaxData () {
        if (this.password.length >= 6) {
          this.form.ver_code = parseInt(this.password.join(' ').replace(/\s/g, ''));
          this.submit(this.form.ver_code);
        }
        //return false;
      },
      clearPasswordHandle: function () {
        this.password = [];
      },
      reGetCode:function(){
        this.getCode();
      },
      async submit(ver_code){
        let { data: rs } = await this.$axios.post('?ct=api&ac=change_phone_num',{
          area_code:this.form.area_code,
          phone_num:this.form.phone_num,
          ver_code:ver_code
        });
        if(rs.code == 0){
          this.$toast("更换手机号成功");
          if(rs.data.state==0){
             this.$toast(rs.msg);
          }else{
            this.$router.push({path:"/setting"});
            this.$toast(rs.msg);
          }
          
        }else{
          this.$toast(rs.msg);
        }
      },
      getCode:function(){
        this.count = 60;
        let that = this;
        let param = {
          account:that.form.area_code + that.form.phone_num,
          action:'change',
          type:1
        }
        
        this.$axios.post('?ct=member&ac=send_ver_code',param).then(rs=>{
          let data = rs.data;
          if(data.code == 0){
            that.timer = setInterval(()=>{
              if(that.count>0 && that.count<=60){
                that.count--;
                that.btnText = this.count + '秒后重新发送';
              }else{
                that.show=true;
                clearInterval(that.timer);
                that.timer = null;
                that.btnText = '重新发送';
              }
              
            },1000)
            that.$toast("获取成功");
          }else{
            that.$toast(data.msg);
          }
        })
      }
    }
  
}
</script>

<style lang="less" scoped>
  .enter-code{
    .title{
      text-align: center;
      background: #fff;
      color:#999;
      font-size:30px;
      padding:30px;
      span,.phone{
        color:#333;
      }
      .phone{
        margin-top:20px;
      }
    }
    .pay-tool {
      position: relative;
      overflow: hidden;
      &-content {
        .pay-tool-inputs {
          margin: 70px auto 0;
          display: flex;
          border:none;
          .item {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: #fff;
            border-radius: 4px;
            margin-right:20px;
            font-size:32px;
            &:last-child {
              border-right: none;
            }
            &:first-child{
              margin-left:20px;
            }
            .icon_dot {
              display: inline-block;
              width: 0.51111111rem;
              height: 0.51111111rem;
              background-size: cover;
            }
          }
        }
      }
      .tips{
        text-align: center;
        font-size:30px;
        color:#999;
        margin-top:30px;
        span{
          color:#2086f9;
        }
      }
      .pay-tool-keyboard {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        ul {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          li {
            width: 33.3333%;
            height: 120px;
            line-height: 120px;
            text-align: center;
            border-right: 1px solid #e3e3e4;
            border-bottom: 1px solid #e3e3e4;
            font-size:36px;
            font-weight: bold;
            background: #fff;
            &.del{
              img{
                width:54px;
                height:40px;
              }
            }
            &:nth-child(1), &:nth-child(2), &:nth-child(3) {
              border-top: 1px solid #eee;
            }
            &:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) {
              border-right: none;
            }
            &:nth-child(10), &:nth-child(11), &:nth-child(12) {
              border-bottom: none;
            }
            &:nth-child(10), &:nth-child(12), &:active {
              background-color: #f6f6f7;
            }
            &:nth-child(12):active {
              background-color: #f6f6f7;
            }
          }
        }
      }
  }

  }
</style>
